<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h5新增的表单输入类型</title>
    <script>
        function rangeChange() {
            var rangeValue=document.getElementById("volume").value;
            document.getElementById("rangeValue").innerHTML=rangeValue;
        }
    </script>
</head>
<body>
   <form action="#">
       url类型：<input type="url" name="urlTest">
       <br>
       email类型：<input type="email" name="emailTest">
       <br>
       range类型：<input type="range" name="volume" id="volume" min="0" max="100" step="1" value="0" oninput="rangeChange()"><span id="rangeValue">0</span>
       <br>
       number类型：<input type="number" name="score" id="score" min="0" max="100" step="1">
       <br>
       tel类型：<input type="tel" name="tel">
       <br>
       search类型：<input type="search" name="search">
       <br>
       color类型：<input type="color" name="color">
       <br>
       date类型：<input type="date" name="date">
       <br>
       <input type="submit" value="确定">
   </form>
</body>
</html>